<template>
    <h4>学习toRaw</h4>
    <button @click="btn1">btn1</button>
    <button @click="btn2">btn2</button>
    <button @click="btn3">btn3</button>
    
    <h4>学习markRaw</h4>
    年龄：{{ age }}
    <button @click="addAge">++</button><br/>
    宠物年龄： {{ p2.pet && p2.pet.age }}
    <button @click="addPetAge">++</button>
    <button @click="markRawFun">markRawFun</button>
</template>

<script>
import { ref, toRefs, reactive, toRaw, markRaw } from 'vue';

export default {
    name: 'StudyToRaw',
    setup() {
        let num = ref(0)
        let p1 = ref({
            name: 'jjj',
            age: 25
        })

        let p2 = reactive({
            name: 'jjj',
            age: 25
        })

        //toRaw
        function btn1() {
            console.log(toRaw(num))
        }

        function btn2() {
            console.log(toRaw(p1))
        }

        function btn3() {
            console.log(toRaw(p2))
        }
        
        //markRaw
        function addAge() {
            p2.age++
        }

        function markRawFun() {
            let pet = {type:'cat', age: 1}
            p2.pet = markRaw(pet)
        }

        function addPetAge() {
            p2.pet.age++
        }

        return {
            btn1,
            btn2,
            btn3,
            ...toRefs(p2),
            p2,
            addAge,
            markRawFun,
            addPetAge
        }
    },
}
</script>

<style>

</style>